<template>
	<view class="flex">
		<scroll-view scroll-y="true" class="box1" :style="{height: scrollHeight+'rpx'}">
			<view class="itemClass text-overflow" v-for="(item,index) in provinceList" :key="index"
				:class="{ 'selectedProvice': provinceIndex==index }"
				:style="{color:provinceIndex==index?selectedColor:''}" @click="selectProvince(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="box2" :style="{height: scrollHeight+'rpx'}">
			<view class="itemClass text-overflow" v-for="(item,index) in cityList" :key="index"
				:style="{color:cityIndex==index?selectedColor:''}" @click="selectCity(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="box3" :style="{height: scrollHeight+'rpx'}"
			:class="{'bl':regionList.length>0}">
			<view class="itemClass text-overflow" v-for="(item,index) in regionList" :key="index"
				:style="{color:countyIndex==index?selectedColor:''}" @click="selectCounty(index)">
				{{ item.store_name }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import cityData from './city.json'
	export default {
		name: "gjs-selectCity",
		props: {
			scrollHeight: {
				type: Number,
				default: 800
			},
			selectedColor: {
				type: String,
				default: "#005a93"
			}
		},
		data() {
			return {
				city:'',
				provinceIndex: 0,
				cityIndex: 0,
				countyIndex: 0,

				provinceList: [],
				cityList: [],
				countyList: [],
				regionList: []
			};
		},
		mounted() {
			let that = this
			if(cityData){
				this.provinceList = cityData
				this.cityList = this.provinceList[this.provinceIndex].city
				this.countyList = this.cityList[this.cityIndex].area
				this.cityIndex = uni.getStorageSync('cityIndex')
				this.countyIndex = uni.getStorageSync('countyIndex')
				this.city =  uni.getStorageSync('city')
				this.getCity();
			}
			
			// alert(JSON.stringify(this.provinceList))
			// if (this.cityList[this.cityIndex].area == null) {
			// 	this.countyList = []
			// } else {
			// 	this.countyList = this.cityList[this.cityIndex].area
			// }
		},
		methods: {
			selectProvince(e) {
				this.provinceIndex = e
				this.cityIndex = 0
				this.countyIndex = 0
				this.cityList = this.provinceList[this.provinceIndex].city
				this.countyList = this.cityList[this.cityIndex].area
			},
			selectCity(e) {
				this.cityIndex = e
				this.countyIndex = 0
				this.countyList = this.cityList[this.cityIndex].area || []
				// if (this.countyList.length == 0) {
				let province = this.provinceList[this.provinceIndex].name
				let city = this.cityList[this.cityIndex].name

				//自行配置 需要返回的 地址 ↓↓↓↓↓↓
				let address = city
				this.city = city
				if (address) {
					this.getCity();
				}
				
				uni.setStorageSync('city', address);
				uni.setStorageSync('cityIndex', e);
				this.$emit('select', {
					city: city
				})
				// }
			},
			async getCity(){
				await uni.request({
					url: '/api/home/get_xcx_city_list',
					data: {
						city: this.city
					},
					success: res => {
						// alert(JSON.stringify(res.data))
						// this.cityList = res.data
						this.regionList = res.data
					}
				});
			},
			selectCounty(e) {
				this.countyIndex = e
				// let province = this.provinceList[this.provinceIndex].name
				let city = this.cityList[this.cityIndex].name
				// let county = this.countyList[this.countyIndex].name
				let county = this.regionList[this.countyIndex].categoryname
				//自行配置 需要返回的 地址 ↓↓↓↓↓↓
				let address = county
				uni.setStorageSync('countyIndex', e);
				this.$emit('select', {
					city: city,
					county: county
				})
			}
		}
	}
</script>

<style>
	@import url("./common.scss");

	.box1 {
		width: 200rpx;
		background-color: #F5F7F7;
	}

	.box2 {
		width: 200rpx;
	}

	.bl {
		border-left: 1rpx solid #EEEEEE;
	}

	.box3 {
		width: calc(100% - 340rpx)
	}

	.itemClass {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 20rpx;
		padding-right: 15rpx;
	}

	.selectedProvice {
		background-color: #FFFFFF;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>